<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Evernote</title>
	<link rel="stylesheet" type="text/css" href="${path }/static/css/demo.css">
</head>
<body>
	<!-- 导航栏 -->
	<div class="navbar">
		<div class="logo">印象笔记</div>	
		<div class="nav">
		    <li>									
			    <a href="" class="navlink">首页</a>
			</li>
			<li>
			    <a href="ToLogin" class="navlink btn1">登录/注册</a>
		    </li>
		    <li>
			    <a href="" class="navlink">帮助</a>
			</li>
			<li class="item">
			    <a href="" class="navlink">更多</a>
				<ul class="list">					
					<li>
						<p>关于</p>
					</li>
					<li>
						<p>下载</p>
					</li>					
					<li>
						<p>博客</p>
					</li>
					<li>
						<p>检查更新</p>
					</li>
					<li>
						<p>联系我们</p>
					</li>
					<li>
						<p>高级会员</p>
					</li>
		        </ul>	
		    </li>    		
		</div>		
	</div>	
	<!-- 导航栏分割线 -->
	<div class="line"></div>
	<div class="content">
		<!-- 轮播图 -->
		<div id="bannerimg">
		    <ul class="pic">
		        <li><a href="javascript:;"><img src="${path }/static/img/demo/img1.png" alt="pic1"></a></li>
		        <li><a href="javascript:;"><img src="${path }/static/img/demo/img2.png" alt="pic2"></a></li>
		        <li><a href="javascript:;"><img src="${path }/static/img/demo/img3.png" alt="pic3"></a></li>
		        <li><a href="javascript:;"><img src="${path }/static/img/demo/img4.png" alt="pic4"></a></li>
		        <li><a href="javascript:;"><img src="${path }/static/img/demo/img5.png" alt="pic5"></a></li>	        
		        <li><a href="javascript:;"><img src="${path }/static/img/demo/img1.png" alt="pic1"></a></li><!-- 克隆第一张 -->
		    </ul>				    
		</div>
		<!-- 标题 -->
		<div class="bg">
			<div class="head">
				使用
				<span class="green">印象笔记</span>
			</div>
			<div class="head">—— 记录生活点滴 ——</div>
			<div class="headtext">随时随地获取、整理、分享笔记，让灵感时刻与你同行</div>
		</div>
		<!-- 中间文字介绍部分 -->
		<div class="center">
			<p class="centertext">集收集、记录、保存、分享于一体在一个地方就能找到</p>
			<!-- 小字部分介绍行 -->
			<div class="row">
				<div class="textrow">					
					<h2><img src="${path }/static/img/demo/sj.png"> 收集</h2>
					<p>一键收集微信、网页、微博、剪切板等碎片化信息，批量导入各种文档。</p>
				</div>
				<div class="textrow" style="float: right;">
					<h2><img src="${path }/static/img/demo/jl.png"> 记录</h2>
					<p>以文字、清单、图片、拍照、语音等形式记录，一次记录永久保存。</p>
				</div>
				<div class="textrow">					
					<h2><img src="${path }/static/img/demo/bc.png"> 保存</h2>
					<p>资料永久保存在云端，修改后的笔记会保存历史版本，无需担心资料丢失。</p>
				</div>
				<div class="textrow" style="float: right;">					
					<h2><img src="${path }/static/img/demo/gx.png"> 共享</h2>
					<p>用链接、QQ、微信等方式分享资料给任何人，用群组和团队成员一起共享资料。</p>
				</div>
			</div>
		</div>
		<div class="trybox">
			<h2>- 探索全新的体验方式 -</h2>
		    <div class="trymore">立即体验</div>
		</div>
	</div>	
	<footer>
		<p>| 网站地图 | 法律声明 | 友情链接 | 交流平台 | </p><br>						
        <p>版权所有 电子信箱:123456@123.cn</p>
    </footer>
</body>
<script type="text/javascript" src="${path }/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${path }/static/js/demo.js"></script>
<script type="text/javascript">
	document.querySelector(".btn1").onclick = function() {
		window.location.href = "ToLogin";
	}
</script>
</html>